<template>
  <el-card>
    <el-row>
      <el-col :span="4">
        <el-button size="mini" type="primary" :loading="syncRequest" @click="syncSysActivity">从聚推客同步活动</el-button>
      </el-col>
    </el-row>
    <el-table :data="activities" highlight-current-row stripe v-loading="loading" element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading" element-loading-background="#fafafa"
      style="width: 100%; margin-top: 10px;">
      <el-table-column type="index" label="编号" align="center" width="100"></el-table-column>
      <el-table-column prop="actId" label="活动编号" align="center" width="100"></el-table-column>
      <el-table-column prop="actName" label="活动名称" align="center" width="200"></el-table-column>
      <el-table-column prop="desc" label="活动详情" align="center"></el-table-column>
      <el-table-column label="图片" align="center" width="150">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 50px" :src="scope.row.img" :preview-src-list="imgs">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="deleteSysActivity(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
  import {
    getSysActivityList,
    deleteSysActivity,
    syncSysActivity
  } from '@/apis/SysApi'

  export default {
    name: 'SysActivity',
    data() {
      return {
        activities: [],
        loading: true,
        imgs: [],
        syncRequest: false,
        addRequest: false
      }
    },
    created() {
      this.getSysActivityList()
    },
    methods: {
      // 查询活动信息列表
      getSysActivityList() {
        getSysActivityList().then(res => {
          if (res.data) {
            this.activities = res.data
            this.imgs = res.data.map(item => {
              return item.img
            })
            this.loading = false
          }
        })
      },
      // 删除活动信息
      deleteSysActivity(id) {
        deleteSysActivity({
          id: id
        }).then(res => {
          if (res.data > 0) {
            this.$message.success('删除成功')
          } else {
            this.$message.error('删除失败')
          }
        })
      },
      // 从聚推客同步活动信息
      syncSysActivity() {
        this.syncRequest = true
        syncSysActivity().then(res => {
          if (res.data > 0) {
            this.$message.success('同步成功')
            this.getSysActivityList()
          } else {
            this.$message.error('同步失败')
          }
          this.syncRequest = false
        })
      }
    }
  }
</script>

<style scoped>

</style>
